<template>
    <div class="dialog">
      <el-dialog :visible="dialogShow" center width="800" @close="handleQuit">
        <template #title> 
            <h3>{{`${title}的sku列表`}}</h3>
        </template>
        <el-table :data="tableData" border v-loading="loading">
            <el-table-column v-for="(item,index) in tableColInfo" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
            <el-table-column label="图片">
                <template v-slot="{row}">
                    <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-button @click="handleQuit">关闭</el-button>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { findBySpuId } from "@/api/product/sku";
export default {
  name: 'Dialog',
  model: {
    prop: 'dialogShow'
  },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading:false,
      tableData: [],
      tableColInfo: [{ name: '名称', prop:'skuName'}, { name: '价格', prop:'price' }, { name: '重量', prop:'weight' }]
    }
  },
  created(){},
  methods: {
    async getData(id) {
        this.loading = true
        const res = await findBySpuId(id)
        this.tableData = res
        this.loading = false
    },
    //   退出
    handleQuit() {
      this.$emit('input', false)
    }
  }
}
</script>

<style></style>
